#!/usr/bin/env python3
from nicegui import ui

def init_code_copy():
    js = """
    document.querySelectorAll('.code-block').forEach(block => {
        const btn = block.querySelector('.copy-btn');
        btn.onclick = () => {
            const code = block.querySelector('code').textContent;
            navigator.clipboard.writeText(code)
                .then(() => {
                    btn.innerHTML = '<i class="material-icons">done</i>';
                    setTimeout(() => 
                        btn.innerHTML = '<i class="material-icons">content_copy</i>', 
                    2000);
                });
        };
    });
    """
    ui.run_javascript(js)


with ui.header().classes(replace='row p-0 m-0') as header:
    ui.button(on_click=lambda: left_drawer.toggle(), icon='menu').props('flat color=white')
    with ui.tabs() as tabs:
        ui.tab('PLSQL调试内容替换')
    ui.input(placeholder='system/abc@192.168.0.1/pdbtest').classes('flex-1 mt-1 pl-10').props('dense input-style="color: white" dark')


with ui.left_drawer().classes('bg-blue-100') as left_drawer:

    # 用于存放新增行的容器
    variable_container = ui.column().classes('w-full p-2')

    # 添加按钮用于新增行
    add_button = ui.button('添加变量', on_click=lambda: add_variable_row(variable_container))

def add_variable_row(container):
    with container:
        with ui.row().classes('w-full gap-2'):
            var_name_input = ui.input(label='变量名', placeholder='变量名').classes('flex-1')
            var_value_input = ui.input(label='值', placeholder='值').classes('flex-1')

code_snippet = '''
from nicegui import ui

with ui.element('div').classes('columns-3 w-full gap-2'):
    for i, height in enumerate([50, 50, 50, 150, 100, 50]):
        tailwind = f'mb-2 p-2 h-[{height}px] bg-blue-100 break-inside-avoid'
        with ui.card().classes(tailwind):
            ui.label(f'Card #{i+1}')

ui.run()
'''


# 自定义工具栏和内容区样式
ui.add_head_html("""
    <style>
        .custom-editor .q-editor__toolbar {
            background: #4a5568;
            border-radius: 8px 8px 0 0;
        }
        .custom-editor .q-editor__content {
            background-color: #f7fafc;
            border: 1px solid #e2e8f0;
            border-radius: 0 0 8px 8px;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            document.querySelectorAll('.code-block').forEach(block => {
                const btn = block.querySelector('.copy-btn');
                btn.onclick = () => {
                    const code = block.querySelector('code').textContent;
                    navigator.clipboard.writeText(code)
                        .then(() => {
                            btn.innerHTML = '<i class="material-icons">done</i>';
                            setTimeout(() => 
                                btn.innerHTML = '<i class="material-icons">content_copy</i>', 
                            2000);
                        });
                };
            });
        });
    </script>
""")

with ui.tab_panels(tabs, value='PLSQL调试内容替换').classes('w-full').style("height: calc(100vh - 100px);"):  # 设置 tab 面板高度为屏幕高度
    with ui.tab_panel('PLSQL调试内容替换'):
        with ui.element('div').classes('columns-2 w-full gap-2 h-full flex'): 
            editor = ui.codemirror(language='PLSQL').classes('flex-1 h-full ').props('''theme="darcula" lineNumbers''')
            code = ui.code(code_snippet,language='PLSQL').classes('code-block flex-1') 
            code.set_content(code_snippet)

ui.run()
